//https://blog.csdn.net/zl1zl2zl3/article/details/81357146
import { PureComponent } from 'react';
import {
  Row,
  Col,
  Form,
  Input,
  Modal,
  Select
} from 'antd';
import SelectDeptTree from '@/components/SelectDeptTree';
const FormItem = Form.Item;
const { Option } = Select;


// 修改表单
@Form.create()
class UpdateForm extends PureComponent {
  static defaultProps = {
    handleUpdate: () => {},
    handleUpdateModalVisible: () => {},
    values: {},
  };

  constructor(props) {
    super(props);
    this.state = {
      formVals: {
	        dept_id: props.values.dept_id,
	        dept_name: props.values.dept_name,
	        parentid: props.values.parentid,
	        parent_name: props.values.parent_name,
	        levelcode: props.values.levelcode,
	        enable: props.values.enable,
        	dept_description: props.values.dept_description,
        	dept_code: props.values.dept_code,
      },
      getDeptTreeBySelectTree: "",
    };

  }

	selectedDeptTreeValue = (deptRecord) => {
		this.setState({
			getDeptTreeBySelectTree: deptRecord
		})
	}
	
  handleLocalUpdate = () => {
    const { form, handleUpdate } = this.props;
    const { formVals: oldValue,getDeptTreeBySelectTree } = this.state;
    form.validateFields((err, fieldsValue) => {

      if (err) return;
      const formVals = { ...oldValue, ...fieldsValue };
      this.setState({
      	formVals,
      });
      if(getDeptTreeBySelectTree) {
	    		formVals.levelcode = getDeptTreeBySelectTree.triggerNode.props.dataRef.levelcode + "/" + formVals.dept_id;
					formVals.parentid = getDeptTreeBySelectTree.triggerNode.props.dataRef.key;
					formVals.parent_name = getDeptTreeBySelectTree.triggerNode.props.dataRef.title;
			}
      handleUpdate(formVals);

    });
  };


  renderContent = (formVals,parentDeptTreeMethod) => {
    const { form } = this.props;

    return (
      <Form  layout="vertical">


        	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>

	            <Col  md={12} sm={24}>
			            <FormItem  label="名称">
			                {form.getFieldDecorator('dept_name', {
			                rules: [{ required: true, message: '请输入部门名称！', min: 1 }],
			                initialValue: formVals.dept_name,
			                })(<Input placeholder="请输入" />)}
			            </FormItem>
	            </Col>
	            
	            
	            <Col  md={12} sm={24}>
	                <FormItem  label="上级部门">
	                	{form.getFieldDecorator('dept')(
	                      <SelectDeptTree {...parentDeptTreeMethod} deptValues={formVals.parent_name}/>
	                  )}
	                </FormItem>
	            </Col>

        	</Row>
        	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>

			       	<Col md={12} sm={24}>
					        <FormItem label="状态">
					            {form.getFieldDecorator('enable',{
					            	initialValue: formVals.enable,
					            })(
					                <Select placeholder="请选择" style={{ width: '100%' }}>
					                	<Option value="1">可用</Option>
					                    <Option value="0">禁用</Option>
					                </Select>
					            )}
					        </FormItem>
			        </Col>
							
			        <Col  md={12} sm={24}>
					        <FormItem  label="描述">
					            {form.getFieldDecorator('dept_description', {
					            rules: [{ required: false }],
					            initialValue: formVals.dept_description,
					            })(<Input placeholder="请输入" />)}
					        </FormItem>
			        </Col>
			
			    </Row>

               
    </Form>
    );

  };



  render() {
    const { 
    	updateModalVisible, 
    	handleUpdateModalVisible, 
    	values,
    	dispatch,
			selectDeptTree,
			requestModelName,
    } = this.props;
    const { formVals } = this.state;
    const parentDeptTreeMethod = {
			dispatch: dispatch,
			selectDeptTree: selectDeptTree,
			selectedDeptTreeValue: this.selectedDeptTreeValue,
			requestModelName: requestModelName,
		}

    return (
      <Modal
    width={800}
    bodyStyle={{ padding: '32px 40px 48px' }}
    destroyOnClose
    title="修改"
    visible={updateModalVisible}
    onOk={() => this.handleLocalUpdate()}
    onCancel={() => handleUpdateModalVisible(false, values)}
    afterClose={() => handleUpdateModalVisible()}
>

    {this.renderContent(formVals,parentDeptTreeMethod)}
</Modal>
    );
  }

}

export default UpdateForm;

